<template>
  <div class="dashboard-container">
    <div class="system-info">
      <div class="info-header">
        <img src="http://tc.mcshare.cn/LightPicture/2025/01/aede08d7a4422fe5.png" alt="logo" class="logo">
        <h1>星穹多功能系统</h1>
      </div>
      
      <div class="tech-stack">
        <h2>技术栈</h2>
        <div class="tech-list">
          <div class="tech-item">
            <i class="el-icon-s-platform"></i>
            <span>Vue.js</span>
          </div>
          <div class="tech-item">
            <i class="el-icon-s-management"></i>
            <span>Element UI</span>
          </div>
          <div class="tech-item">
            <i class="el-icon-s-cooperation"></i>
            <span>Spring Boot</span>
          </div>
          <div class="tech-item">
            <i class="el-icon-s-data"></i>
            <span>MySQL</span>
          </div>
        </div>
      </div>

      <div class="system-features">
        <h2>系统特点</h2>
        <ul>
          <li>B站账号一键登录</li>
          <li>多功能集成平台</li>
          <li>现代化UI设计</li>
          <li>高性能后端支持</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  min-height: calc(100vh - 50px);
  display: flex;
  justify-content: center;
  align-items: center;

  .system-info {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    width: 100%;
    
    .info-header {
      text-align: center;
      margin-bottom: 40px;
      
      .logo {
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
      }
      
      h1 {
        font-size: 32px;
        color: #303133;
        margin: 0;
        font-weight: 600;
      }
    }

    .tech-stack {
      margin-bottom: 40px;
      
      h2 {
        font-size: 24px;
        color: #409EFF;
        margin-bottom: 20px;
        text-align: center;
      }

      .tech-list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;

        .tech-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20px;
          background: #f5f7fa;
          border-radius: 12px;
          min-width: 120px;
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
          }

          i {
            font-size: 32px;
            color: #409EFF;
            margin-bottom: 10px;
          }

          span {
            font-size: 16px;
            color: #606266;
          }
        }
      }
    }

    .system-features {
      h2 {
        font-size: 24px;
        color: #409EFF;
        margin-bottom: 20px;
        text-align: center;
      }

      ul {
        list-style: none;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;

        li {
          padding: 15px 20px;
          background: #f5f7fa;
          border-radius: 8px;
          text-align: center;
          color: #606266;
          font-size: 16px;
          transition: all 0.3s ease;

          &:hover {
            background: #ecf5ff;
            color: #409EFF;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .dashboard-container {
    padding: 15px;

    .system-info {
      padding: 20px;

      .info-header {
        h1 {
          font-size: 24px;
        }
      }

      .tech-stack, .system-features {
        h2 {
          font-size: 20px;
        }
      }
    }
  }
}
</style>

<script>
export default {
  name: 'Index',
  data() {
    return {}
  }
}
</script>

